<template>
    <fieldset>
        <legend>axios的使用</legend>
        <button @click="get">点击发送get请求</button>
        <button @click="post">点击发送post请求</button>
    </fieldset>
</template>
<script>
    import axios from "axios"
    export default {
        methods: {
            get() {
                //1.第一种方式
                // axios.get("/api/data/index.json", {
                //     params: {//给get请求传递参数
                //         name: "李雷"
                //     }
                // })
                //     .then(res => {
                //         console.log(res)
                //     })


                //2.使用config模式

                // axios({
                //     url: "/api/data/index.json",
                //     method: "get",//请求方式
                //     params: {
                //         name: "lbw"
                //     }
                // })
                //     .then(res => {
                //         console.log(res)
                //     })
            },
            post() {
                //1.第一种方式
                //第一个参数是请求地址,第二个参数是请求体,第三个参数是配置项
                // axios.post("/api/users/login", {
                //     username: "lbw",
                //     password: "555"
                // }, {
                //     headers: {
                //         "Content-Type": "application/json"
                //     }
                // })
                //     .then(res => {
                //         console.log(res)
                //     })


                //2.config模式

                axios({
                    url: "/api/users/login",
                    //post请求要放在data中
                    data: {
                        username: "lbw",
                        password: "555"
                    },
                    //get请求放在params中
                    headers: {
                        "Content-Type": "application/json"
                    },
                    method: "post"
                })
                .then(res=>{
                    console.log(res)
                })
            }
        }
    }
</script>